<template>
  <aside class="side-nav">
    <h3>工艺管控</h3>
    <ul>
      <li :class="{ active: $route.path === '/dashboard' }">
        <router-link to="/dashboard"><i class="fas fa-tachometer-alt"></i> 仪表盘</router-link>
      </li>
      <!-- <li :class="{ active: $route.path === '/anomaly-detection' }">
        <router-link to="/anomaly-detection"
          ><i class="fas fa-chart-line"></i> 全流程检测与诊断</router-link
        >
      </li> -->
      <li>
        <div class="main-menu-item" @click="toggleSubMenu">
          <i class="fas fa-chart-line"></i> 全流程检测与诊断
        </div>
        <ul v-show="showSubMenu" class="sub-menu">
          <li :class="{ active: route.path === '/anomaly-detection' }">
            <router-link to="/anomaly-detection">合成车间</router-link>
          </li>
          <li :class="{ active: route.path === '/anomaly-detection-vaporize' }">
            <router-link to="/anomaly-detection-vaporize">气化车间</router-link>
          </li>
          <li :class="{ active: route.path === '/anomaly-detection-urea' }">
            <router-link to="/anomaly-detection-urea">尿素车间</router-link>
          </li>
        </ul>
      </li>
      <li :class="{ active: $route.path === '/smart-assistant' }">
        <router-link to="/smart-assistant"><i class="fas fa-robot"></i> 智能助手</router-link>
      </li>
      <li :class="{ active: $route.path === '/knowledge-graph' }">
        <router-link to="/knowledge-graph"><i class="fas fa-sitemap"></i> 知识图谱</router-link>
      </li>
      <li :class="{ active: $route.path === '/fault-info' }">
        <router-link to="/fault-info"><i class="fas fa-list-alt"></i> 故障列表</router-link>
      </li>
      <li :class="{ active: $route.path === '/custom-chart' }">
        <router-link to="/custom-chart"><i class="fas fa-chart-area"></i> 自定义查询</router-link>
      </li>
    </ul>
  </aside>
</template>

<script setup>
// 不需要 emits 了，因为导航由 router-link 处理
import { useRoute } from 'vue-router' // 导入 useRoute 钩子
import { ref } from 'vue'
import { computed } from 'vue'
const showSubMenu = ref(false)

const route = useRoute() // 获取当前路由实例，用于判断激活状态
const anomalyMenuRoutes = ['/anomaly-detection','/anomaly-detection-vaporize','/anomaly-detection-urea']


function toggleSubMenu() {
  showSubMenu.value = !showSubMenu.value
}
</script>
<style scoped>
.sub-menu {
  padding-left: 0px;
  background: transparent;
}
.sub-menu li{
  text-align: right;
}
.main-menu-item {
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: space-between;
}




</style>